<template>
  <div class="navp">
    
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(v, index) in images" :key="index">
          <img v-lazy="v" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav">
      <img
        src="	https://static.asus.com.cn/store/20210825/11292351525153.png"
        alt=""
      />
     <div class="bb">
      <input type="text" placeholder="请输入内容">
      <van-icon name="search" />
     

      </div> 
      <div class="pl">
        <img
        src="https://static.asus.com.cn/static/wap/app/images/home/button_navibars_2w.png"
        alt=""  @click="obtn"
      />

      </div>
      
    </div>
    <div class="last">
      <div class="pp">
        <img
          src="https://static.asus.com.cn/store/20200608/15263710052535.png"
          alt=""
        />
        <span>全面包*</span>
      </div>
      <div class="pp">
        <img
          src="https://static.asus.com.cn/store/20200608/15263710052535.png"
          alt=""
        />
        <span>贵就赔*</span>
      </div>
      <div class="pp" >
        <img
          src="https://static.asus.com.cn/store/20200608/15263710052535.png"
          alt=""
        />
        <span>慢就赔*</span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
import service from "../../utlis/request";
export default {
  data() {
    return {
      images: [],
      count: 0,
      isLoading: false,
      value: "",
    };
  },
  mounted() {
    service({
      url: "http://localhost:3000/swipe",
      method: "get",
    }).then((res) => {
      this.images=res.data
    });
  },
  methods: {
    onClickLeft() {},
    onClickRight() {},
    obtn(){
      this.$router.push("/login")
      
    }
  },
};
</script>

<style scoped>
.navp{
  width: 100%;
}
.banner {
  height: 15rem;
  width: 100%;
}
.last {
  height: 1.125rem;
  margin: 5px 10px;
  display: flex;
  justify-content: space-evenly;
}
.last .pp img {
  width: 0.875rem;
  height: 0.875rem;
}
.last .pp span {
  height: 1.125rem;
  margin-left: 10px;
}
.van-swipe {
  height: 15rem;

}
.van-swipe img {
  width: 100%;
}
.nav {
  height: 2rem;
  position: absolute;
  top: 10px;
 z-index: 999;
  margin: 10px 20px;
  display: flex;
  width: 100%;
}
.nav img{
  width: 2rem;
  height: 2rem;
 
}
.nav .bb{
  height: 2rem;
 
 width: 100%;
  margin: 0 .625rem;
 
}
.nav .bb input{ 
  height: 2rem;
  
 width: 64%;
 border-radius: 10px;
padding-left: 30px;
clear: both;


}
.nav .pl img{
 position: absolute;
 left: 18.75rem;

}
.van-icon-search{
 top: 10px;
  position: absolute;
  left:54px;
}

</style>